<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <!-- 网页图标 -->
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <!-- 动态设置网页标题 -->
  <title>
    <%= title %>
  </title>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

</html>

<script>
  function resize() {
    const root = document.querySelector("#app")
    if (window.orientation == 180 || window.orientation == 0) {
      // alert("竖屏状态！")
      root.setAttribute("style", ' transform: rotate(90deg);transform-origin: 0% 100%;top: -100vw;position: absolute;height: 100vw;width: 100vh')
    }
    if (window.orientation == 90 || window.orientation == -90) {
      // alert("横屏状态！")
      root.setAttribute("style", ' transform: unset;transform-origin:unset;top: 0;left:0;position: absolute;height: 100%;width: 100%')
    }
  }
  resize()
  window.addEventListener('orientationchange', resize);//监听旋转方向
</script>